<template>
  <div
    id="main"
    style="width: 600px;height:400px;margin:0 auto;display: block;"
  />
</template>

<script setup>
import * as echarts from 'echarts'
import axios from 'axios'
import { onMounted } from 'vue'

onMounted(() => {
  const myChart = echarts.init(document.getElementById('main'))

  // 获取当前月份
  const currentMonth = new Date().getMonth() + 1

  // 默认的配置项
  const option = {
    title: {
      text: '近五月销量统计'
    },
    dataset: {
      source: [
        ['月份', '销量'],
        ['本月', 0],
        ['上月', 0],
        ['上上月', 0],
        ['上上上月', 0],
        ['上上上上月', 0]
      ]
    },
    tooltip: {
      trigger: 'axis',
      // 指示器样式配置
      axisPointer: {
        type: 'cross',
        label: {
          show: true,
          color: '#808080',
          fontSize: 12,
          padding: [20, 0, 0, 0],
          backgroundColor: 'transparent'
        },
        lineStyle: {
          color: '#808080',
          width: 0.5
        },
        formatter: function (params) {
          const html = `<div style="height:auto;width:234px;">
          ${params
            .map(
              (
                item
              ) => `<div style="font-size:12px;color:#808080;margin-bottom:8px;display:flex;align-items:center;line-height:1;">
                <span style="display:inline-block;margin-right:8px;border-radius:6px;width:6px;height:6px;background-color:${
                  item.color
                };"></span>
                ${item.seriesName}
                <span style="flex:1;text-align:right;">${
                  item.value[item.encode.y[0]]
                }</span>
              </div>`
            )
            .join('')}
        </div>`
          return html
        }
      }
    },
    xAxis: {
      data: ['本月', '上月', '上上月', '上上上月', '上上上上月'],
      name: '月份'
    },
    yAxis: {
      type: 'value',
      axisPointer: {
        show: false
      },
      name: '销量'
    },
    series: [
      {
        type: 'line',
        color: '#1890ff', // 线条颜色
        areaStyle: {
          color: 'rgba(24,144,255,0.08)' // 区域背景色
        },
        showSymbol: false, // 只有在 tooltip hover 的时候显示
        symbol: 'emptyCircle', // 拐点形状
        symbolSize: 6 // 拐点大小
      }
    ]
  }

  axios.get('http://localhost:8086/sales/1')
    .then(function (response) {
      const salesData = response.data.data

      // 动态生成xAxis.data
      const xAxisData = []
      for (let i = 0; i < salesData.length; i++) {
        const month = (currentMonth - i + 12) % 12 || 12
        xAxisData.push(`${month}月`)
      }
      xAxisData.reverse()

      // 动态生成dataset.source
      const datasetSource = [['月份', '销量']]
      for (let i = 0; i < salesData.length; i++) {
        datasetSource.push([xAxisData[salesData.length - i - 1], salesData[i]])
      }

      // 更新图表的配置项
      option.xAxis.data = xAxisData
      option.dataset.source = datasetSource

      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option)
    })
    .catch(function (error) {
      console.error('Error fetching sales data:', error)
    })
})
</script>
